﻿<!DOCTYPE html>
<!--
       Licensed to the Apache Software Foundation (ASF) under one
       or more contributor license agreements.  See the NOTICE file
       distributed with this work for additional information
       regarding copyright ownership.  The ASF licenses this file
       to you under the Apache License, Version 2.0 (the
       "License"); you may not use this file except in compliance
       with the License.  You may obtain a copy of the License at

         http://www.apache.org/licenses/LICENSE-2.0

       Unless required by applicable law or agreed to in writing,
       software distributed under the License is distributed on an
       "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
       KIND, either express or implied.  See the License for the
       specific language governing permissions and limitations
       under the License.
-->
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/index.css" />
        <title>Dream Control</title>
        
        <link rel="stylesheet" href="css/wp/jquery.mobile.wp.theme.css" />
        
        <link href="css/progress-bar.css" rel="stylesheet" type="text/css" />
        <link href="css/toggle-button.css" rel="stylesheet" type="text/css" />

        <link rel="stylesheet" href="css/styles.css" />

    <style type="text/css">
        /* custom icons for toggle button*/
        .ui-icon-demo-help,
        .ui-icon-demo-set {
            background-repeat: no-repeat;
            background-position: 50% 50%;
            background-size: 30px 30px;
        }

        .ui-toggle-button-a .ui-icon-demo-set,
        .ui-toggle-button-b[checked='checked'] .ui-icon-demo-set {
            /*background-image: url(Images/set.dark.png) ;*/
            background-image: url();
        }

        .ui-toggle-button-b .ui-icon-demo-set,
        .ui-toggle-button-a[checked='checked'] .ui-icon-demo-set {
            /*background-image: url(Images/set.light.png);*/
            background-image: url();
        }
    </style>


        <script src="css/wp/jquery.mobile.wp.theme.init.js" type="text/javascript"></script>
    <script src="js/jquery.globalstylesheet.js" type="text/javascript"></script>
    <script src="js/jquery.mobile.themeswitcher.js" type="text/javascript"></script>

    <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="js/jquery.mobile-1.3.1.min.js" type="text/javascript"></script>
    <script src="js/SQLike.js" type="text/javascript"></script>

    <script src="js/progress-bar.js" type="text/javascript"></script>
    <script src="js/toggle-button.js" type="text/javascript"></script>

    <script src="js/code/dreamboxResponse.js" type="text/javascript"></script>
    <script src="js/code/RemoteControl.js" type="text/javascript"></script>
    <script src="js/code/uri.js" type="text/javascript"></script>
    <script src="js/code/settingsItem.js" type="text/javascript"></script>
        

    <script type="text/javascript" src="cordova-2.6.0.js"></script>
        <script type="text/javascript" src="js/index.js"></script>
        <script type="text/javascript">
                function onSuccessW(fileSystem) {
                    fileSystem.root.getFile("settings.txt", { create: true, exclusive: false }, fileEntrySuccessW, fail);
                }

                function onSuccessR(fileSystem) {
                    fileSystem.root.getFile("settings.txt", { create: true, exclusive: false }, fileEntrySuccessR, fail);
                }

                //function saveSettings(fileSystem) {
                //    fileSystem.root.getFile("settings.txt", { create: true, exclusive: false }, writeFileEntry, fail);
                //}

                function fileEntrySuccessR(fileEntry) {
                    fileEntry.file(gotFile, fail);
                }

                function fileEntrySuccessW(fileEntry) {
                    fileEntry.createWriter(gotFileWriter, fail);
                }

                function writeFileEntry(fileEntry) {
                    //fileEntry.createWriter(gotFileWriter, fail);
                }

            function gotFileWriter(writer) {
                writer.write(JSON.stringify(SettingsHelper.SettingsList()));
                $.mobile.changePage('index.html#settings');
            }


            function gotFile(file) {
                readDataUrl(file);
                readAsText(file);
            }

            function readDataUrl(file) {
                var reader = new FileReader();
                reader.onloadend = function (evt) {
                    //console.log("Read as data URL");
                    //console.log(evt.target.result);
                };
                reader.readAsDataURL(file);
            }

            function readAsText(file) {
                var reader = new FileReader();
                reader.onloadend = function (evt) {
                    var arr = evt.target.result;
                    SettingsHelper.SetupSettings(arr);

                    $.mobile.changePage('#channels');
                    
                };
                reader.readAsText(file);
            }

            function fail(evt) {
                console.log(evt.target.error.code);
            }

            //app.initialize();

        </script>

    </head>
    <body onload='onLoad();'>

    <div data-role="page" id="main" style="background-color:none;">
        <div data-role="header" style="margin:0;padding:0;height:45px;">
            <span class="ui-app-title">DREAM CONTROL</span>
        </div>
        <!-- /header -->

        <div data-role="content" >
            <div class="noConnection">No WiFi connection</div>
            <div style="display:table-cell; vertical-align:middle;height:200px;"> Loading settings... please wait</div>
        </div>
        <!-- /content -->

    </div>
                
    <div data-role="page" id="bouquets">
        <div data-role="header" style="margin:0;padding:0;height:45px;">
            <span class="ui-app-title">DREAM CONTROL</span>
        </div>
        <!-- /header -->

        <div data-role="content">
            <div class="noConnection">No WiFi connection</div>
            <ul id="bouquetsList" name="list-view-1" data-role="listview" data-inset="true" />
        </div>
        <!-- /content -->

        <div data-role="footer" data-theme="d">
            <h4>bouquets</h4>
        </div>
        <!-- /footer -->
    </div>

    <!-- Start of page: #remotecontrol -->
    <div data-role="page" id="remotecontrol">
        <div data-role="header" style="margin:0;padding:0;height:45px;">
            <span class="ui-app-title">DREAM CONTROL</span>
        </div>
        <!-- /header -->

        <div data-role="content">            
            <div class="noConnection">No WiFi connection</div>
            <ul data-role="listview" data-inset="true" data-divider-theme="d">
                <li data-role="list-divider">Remote Control</li>
            </ul>
            <a data-role="button" id="rcPower" data-transition="flip">power</a>
            <div>
                <div style="float: left; margin-top: 17px; margin-right: 4px;">
                    <label for="number-1">Channel:</label></div>
                <div style="float: left; width: 23.5%; margin-top: 8px; margin-right: 5px;">
                    <input name="number-1" style="padding: 1px 3px 1px 5px; font-size: 18px; font-weight: bold;" id="number-1" type="number" value="" data-clear-btn="false"></div>
                <div style="float: right; width: 48%"><a data-role="button" id="rcOKcnl" data-transition="flip">ok</a></div>
                <div style="clear: both"></div>
            </div>
            <div>
                <div style="float: left; margin-top: 20px; margin-right: 13px;">
                    <label>Volume:</label></div>
                <div style="float: left; margin-right: 2px;"><a data-role="button" id="rcVolumeUp" style="width: 68px" data-transition="flip">+</a></div>
                <div style="float: left;"><a data-role="button" id="rcVolumeDown" style="width: 68px" data-transition="flip">-</a></div>
                <div style="float: right;"><a data-role="button" id="rcMute" style="width: 70px" data-transition="flip">mute</a></div>
                <div style="clear: both"></div>
            </div>
            <div>
                <div style="float: left; width: 49.4%;"><a data-role="button" style="margin-bottom: 1px" id="rcInfo" data-transition="flip">info</a></div>
                <div style="float: right; width: 49.4%;"><a data-role="button" style="margin-bottom: 1px" id="rcDream" data-transition="flip">dream</a></div>
                <div style="clear: both"></div>
                <div style="float: left; width: 49.4%;"><a data-role="button" style="margin-top: 1px" id="rcAudio" data-transition="flip">audio</a></div>
                <div style="float: right; width: 49.4%;"><a data-role="button" style="margin-top: 1px" id="rcVideo" data-transition="flip">video</a></div>
                <div style="clear: both"></div>
            </div>
            <div id="media">
                <div style="float: left; width: 24.45%; margin-right: 2px;"><a data-role="button" id="rcTV" data-transition="flip">tv</a></div>
                <div style="float: left; width: 24.45%; margin-right: 2px;"><a data-role="button" id="rcRadio" data-transition="flip">radio</a></div>
                <div style="float: left; width: 24.45%; margin-right: 2px;"><a data-role="button" id="rcText" data-transition="flip">text</a></div>
                <div style="float: left; width: 24.45%;"><a data-role="button" id="rcHelp" data-transition="flip">help</a></div>
                <div style="clear: both"></div>
            </div>
            <div id="navigation">
                <div style="float: left; width: 24.45%;"><a data-role="button" id="rcNavLeft" data-transition="flip">left</a></div>
                <div style="float: left; width: 24.45%; margin-right: 2px;"><a data-role="button" id="rcNavUp" data-transition="flip">up</a></div>
                <div style="float: left; width: 24.45%; margin-right: 2px;"><a data-role="button" id="rcNavDown" data-transition="flip">down</a></div>
                <div style="float: right; width: 24.45%"><a data-role="button" id="rcNavRight" data-transition="flip">right</a></div>
                <div style="clear: both"></div>
            </div>
            <div id="colors">
                <div style="float: left; width: 24.45%; margin-right: 2px;"><a data-role="button" id="rcRed" style="background-color: darkred" data-transition="flip">red</a></div>
                <div style="float: left; width: 24.45%; margin-right: 2px;"><a data-role="button" id="rcGreen" style="background-color: darkgreen" data-transition="flip">green</a></div>
                <div style="float: left; width: 24.45%; margin-right: 2px;"><a data-role="button" id="rcYellow" style="background-color: #e1bf00" data-transition="flip">yellow</a></div>
                <div style="float: left; width: 24.45%;"><a data-role="button" id="rcBlue" style="background-color: #001d8d" data-transition="flip">blue</a></div>
                <div style="clear: both"></div>
            </div>
            <div>
                <div style="float: left; width: 49.5%"><a data-role="button" id="rcCancel" style="background-color: #fff; color: #000; border-color: #fff" data-transition="flip">cancel</a></div>
                <div style="float: right; width: 49.5%"><a data-role="button" id="rcOK" style="background-color: #fff; color: #000; border-color: #fff" data-transition="flip">ok</a></div>
                <div style="clear: both"></div>
            </div>

            <label>Pad</label>
            <hr />
            <div>
                <div style="float: left; width: 33.3%;"><a data-role="button" id="rcOne" style="padding: 10px; margin: 2px;" data-transition="flip">1</a></div>
                <div style="float: left; width: 33.4%;"><a data-role="button" id="rcTwo" style="padding: 10px; margin: 2px;" data-transition="flip">2</a></div>
                <div style="float: left; width: 33.3%"><a data-role="button" id="rcThree" style="padding: 10px; margin: 2px;" data-transition="flip">3</a></div>
                <div style="clear: both"></div>
            </div>
            <div>
                <div style="float: left; width: 33.3%;"><a data-role="button" id="rcFour" style="padding: 10px; margin: 2px;" data-transition="flip">4</a></div>
                <div style="float: left; width: 33.4%;"><a data-role="button" id="rcFive" style="padding: 10px; margin: 2px;" data-transition="flip">5</a></div>
                <div style="float: left; width: 33.3%"><a data-role="button" id="rcSix" style="padding: 10px; margin: 2px;" data-transition="flip">6</a></div>
                <div style="clear: both"></div>
            </div>
            <div>
                <div style="float: left; width: 33.3%;"><a data-role="button" id="rcSeven" style="padding: 10px; margin: 2px;" data-transition="flip">7</a></div>
                <div style="float: left; width: 33.4%;"><a data-role="button" id="rcEight" style="padding: 10px; margin: 2px;" data-transition="flip">8</a></div>
                <div style="float: left; width: 33.3%"><a data-role="button" id="rcNine" style="padding: 10px; margin: 2px;" data-transition="flip">9</a></div>
                <div style="clear: both"></div>
            </div>
            <div>
                <div style="float: left; width: 33.3%;"><a data-role="button" id="A2" style="background-color: #fff; color: #000; border-color: #fff; padding: 10px; margin: 2px;" data-transition="flip">&nbsp;</a></div>
                <div style="float: left; width: 33.4%;"><a data-role="button" id="rcZero" style="padding: 10px; margin: 2px;" data-transition="flip">0</a></div>
                <div style="float: left; width: 33.3%"><a data-role="button" id="A4" style="background-color: #fff; color: #000; border-color: #fff; padding: 10px; margin: 2px;" data-transition="flip">&nbsp;</a></div>
                <div style="clear: both"></div>
            </div>
        </div>
        <!-- /content -->
        <div data-role="footer" data-theme="d">
            <h4>control</h4>
        </div>
        <!-- /footer -->
    </div>

    <div data-role="page" id="channels">
        <div data-role="header" style="margin:0;padding:0;height:45px;">
            <span class="ui-app-title">DREAM CONTROL</span>

        </div>
        <!-- /header -->

        <div data-role="content" data-theme="a">
            <div class="noConnection">No WiFi connection</div>
            <a data-role="button" id="viewEPG" data-transition="flip">epg for current channel</a>
            <!--<div class="content-primary">-->
            <ul id="chnlList" name="list-view-1" data-role="listview" data-inset="true" />
            <!--</div>-->
            <!--/content-primary -->
        </div>
        <!-- /content -->
        <div data-role="footer" data-theme="d">
            <h4>channels</h4>
        </div>
        <!-- /footer -->
    </div>
    <!-- /page -->

    <!-- Start of page: #epg -->
    <div data-role="page" id="epg">
        <div data-role="header" style="margin:0;padding:0;height:45px;">
            <span class="ui-app-title">DREAM CONTROL</span>
        </div>
        <!-- /header -->

        <div data-role="content" >			
		<div class="noConnection">No WiFi connection</div>
            <div id="epgContent"></div>

	</div><!-- /content -->

        <div data-role="footer" data-theme="d">
            <h4>epg</h4>
        </div>
        <!-- /footer -->
    </div>
    <!-- /page one -->

    <!-- Start of page: #settings -->
    <div data-role="page" id="settings">
        <div data-role="header" style="margin:0;padding:0;height:45px;">
            <span class="ui-app-title">DREAM CONTROL</span>

        </div>
        <!-- /header -->

        <div data-role="content" >
            <div class="noConnection">No WiFi connection</div>
            <a data-role="button" id="addReceiver" style="" data-transition="flip">add new profile</a>
            <div id="noActive" class="errorMessage">No active profile</div>
            <ul id="settingsList" data-role="listview" data-inset="true"></ul>
	</div><!-- /content -->

        <div data-role="footer" data-theme="d">
            <h4>settings</h4>
        </div>
        <!-- /footer -->
    </div>
    <!-- /page settings -->

    <!-- Start of page: #profiles -->
    <div data-role="page" id="profiles">
        <div data-role="header" style="margin:0;padding:0;height:45px;">
            <span class="ui-app-title">DREAM CONTROL</span>

        </div>
        <!-- /header -->

        <div data-role="content" >
            <div class="noConnection">No WiFi connection</div>
            <div class="fieldSpacer"></div>
		    <div style="float:left"><label for="number-pattern">Use this profile:</label></div>
            <div style="float:right">
            <select name="activeProfile" id="activeProfile" data-role="slider" data-mini="true">
                <option value="off">Off</option>
                <option value="on">On</option>
            </select></div>
            <div style="clear:both;"></div>
            <div id="activeProfileValidate" class="validation"></div>
            <div class="fieldSpacer"></div>

            <label for="number-pattern">Receiver name*:</label>
            <input name="receiver" id="receiver" value="" style="font-size:small" placeholder="Unique receiver name (max 20)" type="text" />
            <div id="receiverValidate" class="validation"></div>
            <div class="fieldSpacer"></div>

            <label for="number-pattern" style="margin-top:55px;">Host*:</label>
            <div>
                <div style="float:left;width:80%"><input name="host" id="host" value="" style="font-size:small" placeholder="Web interface url. e.g. 192.168.0.1" type="number"/></div>
                <div style="float:right;width:16%;margin-top:-7px;"><a data-role="button" id="ipAddress">ip</a></div>
                <div style="clear:both"></div>
            </div>
            <div id="hostValidate" class="validation"></div>
            <div class="fieldSpacer"></div>

            <label for="number-pattern">Port:</label>
            <input name="port" id="port" value="" style="font-size:small" placeholder="Port. e.g. 1234. Leave empty for default" type="number"/>
            <div id="portValidate" class="validation"></div>
            <div class="fieldSpacer"></div>

            <label for="number-pattern">User:</label>
            <input name="user" id="user" value="" style="font-size:small" placeholder="Only if a user is required. Leave blank if you are not sure" type="text"/>
            <div id="userValidate" class="validation"></div>
            <div class="fieldSpacer"></div>

            <label for="number-pattern">Password:</label>
            <input name="password" id="password" value="" style="font-size:small" placeholder="Only if a password is required. Leave blank if you are not sure" type="password" />
            <div id="passwordValidate" class="validation"></div>
            <div class="fieldSpacer"></div>

            <label for="number-pattern">Parameters:</label>
            <input name="params" id="params" value="" style="font-size:small" placeholder="Additional params split by (;). -movieStreamPort 31339; -channelStreamPort 31342" type="text"/>
            <div id="paramsValidate" class="validation"></div>
            <div class="fieldSpacer"></div>

            <div style="float:left;"><label for="number-pattern">SSL:</label></div>
            <div style="float:right;"><select name="ssl" id="ssl" disabled="disabled" data-role="slider" data-mini="true">
                <option value="off" selected="selected">Off</option>
                <option value="on">On</option>
            </select></div>
            <div style="clear:both;"></div>
            <div class="fieldSpacer"></div>
            <div class="fieldSpacer"></div>

            <div>
            <!--<a data-role="button" id="settingsTestConnection"  data-transition="flip">test connection</a>-->
            <a data-role="button" id="settingsSave" data-transition="flip">save</a>
                </div>
	    </div><!-- /content -->

        <div data-role="footer" data-theme="d">
            <h4>settings</h4>
        </div>
        <!-- /footer -->
    </div>
    <!-- /page profiles -->
    <!-- Start of page: #about -->
    <div data-role="page" id="about">
        <div data-role="header" style="margin:0;padding:0;height:45px;">
            <span class="ui-app-title">DREAM CONTROL</span>

        </div>
        <!-- /header -->

        <div data-role="content" >
            <div class="noConnection">No WiFi connection</div>
		    <div><p>Dream Control app offers a very simple and clear interface to control your decoder. Currently it can be integrated with any decoder running enigma operating system.</p></div>
            <div><p>For any issue reports or enhancement requests please contact my on <a href="mailto:info@softcarbongear.com">info@softcarbongear.com</a></p></div>
            <div><p>Before using the application please read the privacy statement below:</p></div>
            <div><p><a href="http://www.softcarbongear.com/privacystatement/wp8/DreamControl_PrivacyPolicy.html">Privacy Policy</a></p></div>
            <div style="float:left;"><a href="http://www.windowsphone.com/en-us/store/app/dreamcontrol/493d7521-32dc-431b-8cf9-09490711beec">Rate and review</a></div>
            <div style="clear:both;"></div>
            <div style="text-align:right;">version: 1.0.2</div>
            <div style="text-align:right;">www.softcarbongear.com</div>

	    </div><!-- /content -->

        <div data-role="footer" data-theme="d">
            <h4>about</h4>
        </div>
        <!-- /footer -->
    </div>
    <!-- /page about -->
        <!-- Start of page: #confirmPage -->
    <div data-role="page" id="confirmPage" style="text-transform:none;">
        <div data-role="header" style="margin:0;padding:0;height:45px;">
            <span class="ui-app-title">DREAM CONTROL</span>

        </div>
        <!-- /header -->

        <div data-role="content" >
            <div class="noConnection">No WiFi connection</div>
		    <ul data-role="listview" data-inset="true" data-divider-theme="d">
                <li data-role="list-divider">Delete Profile</li>
            </ul>
            <div>Are you sure you want to delete the profile:</div>
		    <div id="profileName" style="padding:15px 0"></div>
            <div>
                <a id="confirmPage_no" data-role="button" style="float:right;width:120px;">no</a>
                <a id="confirmPage_yes" data-role="button" style="float:right;width:120px;margin-right:5px">yes</a>
            <div style="clear:both;"></div>
            </div>
	    </div><!-- /content -->
    </div>
    <!-- /page confirmPage -->
    </body>
</html>
